<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师课程统计</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/page.css" />
</head>
<style>
    .teacher-course-container {
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .page-title {
      text-align: center;
      margin-bottom: 30px;
      color: #333;
    }
    
    .time-selector {
      margin-bottom: 30px;
      text-align: center;
    }
    
    .year-selector {
      margin-bottom: 20px;
    }
    
    .month-selector {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }
    
    .statistics-cards {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
    }
    
    .stat-card {
      flex: 1;
      margin: 0 10px;
      min-width: 200px;
    }
    
    .card-content {
      text-align: center;
      padding: 20px 0;
    }
    
    .card-title {
      font-size: 16px;
      color: #666;
      margin-bottom: 10px;
    }
    
    .card-value {
      font-size: 24px;
      font-weight: bold;
      color: #409EFF;
    }
    
    .teacher-table {
      margin-top: 20px;
    }
    
    /* 响应式调整 */
    @media (max-width: 768px) {
      .statistics-cards {
        flex-direction: column;
      }
      
      .stat-card {
        margin: 10px 0;
      }
    }
</style>
<body>
<div class="dashboard-container" id="teacher-detail">
    <div class="container">
        <div class="tableBar">
            <el-input 
                v-model="searchInput" 
                placeholder="请输入教师姓名" 
                style="width: 250px" 
                clearable 
                @keyup.enter.native="handleQuery"
            >
                <i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="init"></i>
            </el-input>
            <el-button type="primary" icon="el-icon-search" @click="init" style="margin-left: 10px">搜索</el-button>
        </div>
        
        <div class="teacher-course-container">
            <!-- 时间选择器 -->
            <div class="time-selector">
                <!-- 年份选择 -->
                <div class="year-selector">
                    <el-select v-model="selectedYear" placeholder="选择年份" @change="handleYearChange" style="width: 120px">
                        <el-option
                            v-for="year in years"
                            :key="year"
                            :label="year + '年'"
                            :value="year">
                        </el-option>
                    </el-select>
                    
                    <el-select v-model="selectedMonth" placeholder="选择月份" @change="handleMonthChange" style="width: 120px; margin-left: 10px">
                        <el-option
                            v-for="month in months"
                            :key="month.value"
                            :label="month.label"
                            :value="month.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            
            <!-- 统计卡片 -->
            <div class="statistics-cards">
                <el-card class="stat-card" shadow="hover">
                    <div class="card-content">
                        <div class="card-title">本月课程总数</div>
                        <div class="card-value">{{ currentData.totalCourses || 0 }}</div>
                    </div>
                </el-card>
                
                <el-card class="stat-card" shadow="hover">
                    <div class="card-content">
                        <div class="card-title">教师总数</div>
                        <div class="card-value">{{ currentData.teacherCount || 0 }}</div>
                    </div>
                </el-card>
            </div>
            
            <!-- 教师课程表格 -->
            <el-table
                :data="currentData.teachers"
                stripe
                class="tableBox"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="25"></el-table-column>
                <el-table-column
                    prop="name"
                    label="教师姓名"
                    width="180"
                ></el-table-column>
                
                <el-table-column
                    prop="privateCount"
                    label="私教"
                ></el-table-column>
                
                <el-table-column
                    prop="groupCount"
                    label="团课"
                ></el-table-column>
                
                <el-table-column
                    prop="totalCount"
                    label="总课程数"
                ></el-table-column>
                
            
            </el-table>
            
            <el-pagination
                class="pageList"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="counts"
                @size-change="handleSizeChange"
                :current-page.sync="page"
                @current-change="handleCurrentChange"
            ></el-pagination>
        </div>
    </div>
</div>
</body>
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/teacher.js"></script>
<script>
new Vue({
    el: '#teacher-detail',
    data() {
        // 获取当前年份
        const currentYear = new Date().getFullYear();
        
        return {
            searchInput: '',
            counts: 0,
            page: 1,
            pageSize: 10,
            selectedYear: currentYear, // 默认选中当前年份
            selectedMonth: new Date().getMonth() + 1, // 默认选中当前月份
            years: [currentYear - 1, currentYear, currentYear + 1], // 近三年
            months: [
                { value: 1, label: '一月' },
                { value: 2, label: '二月' },
                { value: 3, label: '三月' },
                { value: 4, label: '四月' },
                { value: 5, label: '五月' },
                { value: 6, label: '六月' },
                { value: 7, label: '七月' },
                { value: 8, label: '八月' },
                { value: 9, label: '九月' },
                { value: 10, label: '十月' },
                { value: 11, label: '十一月' },
                { value: 12, label: '十二月' }
            ],
            currentData: {
                totalCourses: 0,
                teacherCount: 0,
                teachers: [{
					name: '张三',
					privateCount: 10,
					groupCount: 5,
					totalCount: 15
				}]
            },
            checkList: []
        };
    },
    created() {
        this.init();
    },
    methods: {
        async init() {
            const params = {
                page: this.page,
                pageSize: this.pageSize,
                year: this.selectedYear,
                month: this.selectedMonth,
                name: this.searchInput ? this.searchInput : undefined
            };
            
            await getTeacherCourseStats(params).then(res => {
                if (String(res.code) === '1') {
                    this.currentData = res.data || {
                        totalCourses: 0,
                        teacherCount: 0,
                        teachers: []
                    };
                    this.counts = res.data.teachers.length || 0;
                }
            }).catch(err => {
                this.$message.error('请求出错了：' + err);
            });
        },
        handleYearChange(year) {
            this.page = 1;

            this.init();
        },
        handleMonthChange(month) {
            this.page = 1;
            this.init();
        },
        handleQuery() {
            this.page = 1;
            this.init();
        },
      
        handleSelectionChange(val) {
            let checkArr = [];
            val.forEach((n) => {
                checkArr.push(n.id);
            });
            this.checkList = checkArr;
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.init();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.init();
        }
    }
});
</script>
</html>